<template>
  <div class="container" ref="">
    <div>接口已调通，样式未开发完成</div>
    <br>
     <div>
        <input type="file" class="input-button" ref="btnFile" />
        <in-button type="primary" @click="uploadFile(0)">上传</in-button>
    </div>
  </div>
</template>

<script>
import { uploadSlice, merge } from '@/api/file'

export default {
  name: 'index',
  props: {
  },
  data: function () {
    return {
      msg: '123',
      btnFile: null,
      chunkSize: 1024 * 1024
    }
  },
  methods: {
    uploadFile  (index) {
      console.log(this.$refs.btnFile.files.length)
      if (this.$refs.btnFile.files.length === 0) {
        this.$message.error('请选择文件')
        return false
      } else {
        let file = this.$refs.btnFile.files[0]
        let fileNameArr = file.name.split('.')
        let fname = fileNameArr[0]
        let fext = fileNameArr[1]
        let start = index * this.chunkSize
        if (start > file.size) {
          this.handlemerge(file.name)
          return false
        } else {
          let blob = file.slice(start, start + this.chunkSize)
          let blobName = `${fname}.${index}.${fext}` // 文件名：文件的名称+index+后缀命名
          let blobFile = new File([blob], blobName)
          let formData = new FormData()
          formData.append('file', blobFile)
          console.log(blob, blobFile, formData.get(file))
          uploadSlice(formData).then((res) => {
            this.uploadFile(++index)
          })
        }
      }
    },
    handlemerge (name) {
      merge({ name }).then((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.fileinput-button{
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}

</style>
